import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Home from './pages/Home';
import MaterialShare from './pages/MaterialShare';
import ExchangeMatch from './pages/ExchangeMatch';
import MovieEvent from './pages/MovieEvent';
import Messages from './pages/Messages';
import Profile from './pages/Profile';
import TabBar from './components/TabBar';
import './App.css';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 简单的登录处理
  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  // 登录页面
  const LoginPage = () => (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 px-4">
      <div className="w-full max-w-md bg-white rounded-lg shadow-lg p-6">
        <div className="flex justify-center mb-8">
          <div className="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center">
            <span className="text-white text-2xl font-bold">粉丝圈</span>
          </div>
        </div>
        <h1 className="text-2xl font-bold text-center mb-6">粉丝物料交换平台</h1>
        <button 
          onClick={handleLogin}
          className="w-full bg-green-500 text-white py-3 rounded-full font-medium shadow-md hover:bg-green-600 transition duration-300"
        >
          微信一键登录
        </button>
      </div>
    </div>
  );

  return (
    <Router>
      <div className="app-container max-w-md mx-auto h-screen flex flex-col bg-gray-50 relative">
        <Routes>
          <Route path="/login" element={!isLoggedIn ? <LoginPage /> : <Navigate to="/" />} />
          <Route path="/" element={isLoggedIn ? <Home /> : <Navigate to="/login" />} />
          <Route path="/material-share" element={isLoggedIn ? <MaterialShare /> : <Navigate to="/login" />} />
          <Route path="/exchange" element={isLoggedIn ? <ExchangeMatch /> : <Navigate to="/login" />} />
          <Route path="/movie" element={isLoggedIn ? <MovieEvent /> : <Navigate to="/login" />} />
          <Route path="/messages" element={isLoggedIn ? <Messages /> : <Navigate to="/login" />} />
          <Route path="/profile" element={isLoggedIn ? <Profile /> : <Navigate to="/login" />} />
          <Route path="*" element={<Navigate to={isLoggedIn ? "/" : "/login"} />} />
        </Routes>
        {isLoggedIn && <TabBar />}
      </div>
    </Router>
  );
}

export default App;